<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-on: === @ -->
    <button @click="showInfo($event,99)">点我</button>

    <!-- 事件修饰符，vue提供了6个事件修饰符：
     1. prevent: 阻止默认事件（常用）
     2. stop: 阻止事件冒泡（常用）
     3. once: 事件只触发一次（常用）
     4. capture: 使用事件的捕获模式，在捕获阶段就触发事件
     5. self: 只有event.target是当前操作的元素时才触发事件
     6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕-->
    <!-- 事件的捕获和冒泡，先捕获再冒泡，捕获先从父元素开始往内，冒泡从子元素开始往外 -->
    <a href="http://baidu.com" @click.prevent="jump">点我跳转</a><!--prevent阻止默认行为，a标签的默认行为是跳转，这里阻止了-->

    <!-- 键盘事件，vue中9种常见的按键别名：
            回车：enter
            删除：delete
            退出：esc
            空格：space
            换行：tab (特殊，必须配合keydown使用，因为tab自带一个失去当前焦点的功能)
            上：up
            下：down
            左：left
            右：right-->
    <input type="text" placeholder="请输入" @keyup.enter="key">
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            showInfo(event,num){
                console.log("点击事件默认传入的事件对象：",event)
                console.log("利用event获取标签：",event.target)
                alert("num = "+num)
            },
            jump(event){
                alert("阻止跳转")
            },
            key(event){
                alert("。。。。。。")
            }
        }
    })
</script>

</body>
</html>